<template>
  <div class="ls-text-form">
    <div
      v-for="(item, index) in config"
      :key="index"
      class="form-item"
      :style="{
        'grid-column-start': 'span 24',
        'grid-column': 'span ' + (item.span || 24),
        'grid-row': 'span ' + (item.row || 1)
      }"
    >
      <!-- label -->
      <div
        v-if="!item.labelHidden && item.type !== 'header'"
        class="form-label"
        :style="{ width: labelWidth, textAlign: labelPosition }"
      >
        {{ item.label }}{{ item.prefixUnit
        }}{{ item.labelSuffix || item.labelSuffix === '' ? item.labelSuffix : ':' }}
      </div>
      <!-- 内容 -->
      <slot
        v-if="item.type === 'slot'"
        :name="item.slotName"
        v-bind="{ value: model[item.prop], row: item }"
      ></slot>
      <ls-file-upload
        v-else-if="item.type === 'upload'"
        :class="{ 'm-0': item.listType === 'text' }"
        v-bind="item"
        v-model="model[item.prop]"
        v-on="item.events"
      />
      <ls-amap-address
        v-else-if="item.type === 'map'"
        v-bind="item"
        :address="model[item.prop]"
        :longitude="model[item.longitude]"
        :latitude="model[item.latitude]"
        readOnly
        v-on="item.events"
        class="w-100 m-6"
      />
      <div v-else-if="item.type === 'header'" class="segment-title">
        {{ item.label }}
      </div>
      <div v-else class="form-value" :class="getClass(item)" @click="$emit(`${item.event}`, model)">
        <span v-if="item.prefixText" class="prefix-text">{{ item.prefixText }}</span>
        <span class="content">
          {{
            item.transform
              ? item.transform(model[item.prop], model)
              : model[item.altProp || item.prop]
          }}
        </span>
        <span v-if="item.suffixText" class="suffix-text">{{ item.suffixText }}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  labelWidth: {
    type: String,
    default: 'auto'
  },
  labelPosition: {
    type: String,
    default: 'left'
  },
  config: Array,
  model: Object
})
const getClass = (item) => {
  return item.color + ' ' + (item.event ? 'header' : '')
}
const gridColumn = (span) => {
  return {
    gridColumn: `span ${typeof span === 'number' ? span : this.columns}`
  }
}
</script>

<style lang="scss" scoped></style>
